<template>

  <div class="backView">
    <div class="closeIcon" @click="continueClick">
      <img style="width: 16px; height: 16px;" src="../../../../../static/img/m/windows_close.png" />
    </div>
    <p class="titleLabel">房地产课程测试</p>
    <img class="imgView" src="../../../../../static/img/m/test_pop_up_windows_picture.png" />
    <p class="tipLabel">之前的答题进度为{{percent}}%<br />
      是否继续上次回答？</p>
    <div class="timeBack">
      <p class="black14">用时 ：</p>
      <p class="black14 fontBold marginLeft16">{{hour}}</p>
      <p class="grey14 marginLeft2">时</p>
      <p class="black14 fontBold marginLeft2">{{min}}</p>
      <p class="grey14 marginLeft2">分</p>
      <p class="black14 fontBold marginLeft2">{{sec}}</p>
      <p class="grey14 marginLeft2">秒</p>
    </div>

    <div class="buttonBack">
      <div class="exitBtn" @click="exitClick">退出测试</div>
      <div class="continueBtn" @click="continueClick">继续回答</div>
    </div>

  </div>
</template>

<script>

  export default {
    props:['time', 'answerList'],

    computed:{
      hour() {
        return Math.floor(this.time / 3600)
      },
      min() {
        return Math.floor((this.time % 3600) / 60)
      },
      sec() {
        return this.time % 60
      },
      percent() {
        var count = 0
        this.answerList.map((item) => {
          if (item.r) {
            count ++
          }
        })
        return Math.ceil(count / this.answerList.length * 100)
      }

    },
    methods:{
      continueClick() {
        console.log('dasdasdsadas')
        this.$emit('sendContinueClick');
      },
      exitClick() {
        this.$emit('sendExitClick');
      }
    }
  }

</script>

<style scoped>
  .backView {
    padding: 16px 32px 24px 32px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .closeIcon {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px;
  }
  .titleLabel {
    font-family: PingFang-SC-Bold;
    color: #252526;
    font-size: 16px;
    font-weight: bold;
    margin-top: 48px;
  }
  .imgView {
    margin-top: 34px;
    width: 84px;
    height: auto;
  }
  .tipLabel{
    font-size: 14px;
    color: #252526;
    letter-spacing: 0;
    text-align: center;
    margin-top: 12px;
  }
  .timeBack {
    display: flex;
    flex-direction: row;
    margin-top: 12px;
    align-items: center;
  }

  .black14 {
    font-size: 14px;
    color: #333333;
  }
  .fontBold {
    font-weight: bold;
  }
  .grey14 {
    font-size: 14px;
    color: #999999;
  }

  .marginLeft2 {
    margin-left: 2px;
  }

  .marginLeft16 {
    margin-left: 16px;
  }
  .buttonBack {
    width: 100%;
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .exitBtn {
    width: 40%;
    height: 32px;
    background-color: #CCE3F9;
    color: #1286F7;
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
  }
  .continueBtn {
    width: 40%;
    height: 32px;
    background-color: #1286F7;
    color: white;
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 32px;
    text-align: center;
    border-radius: 4px;
  }
</style>
